<template>
    <div>
        <div class="flex-between">
            <div>
                <el-button size="mini">删除</el-button>
                <el-button size="mini">标记已读</el-button>
                <el-button size="mini">全部标记已读</el-button>
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                        v-for="item in []"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div>
            <div>
                <el-input placeholder="请输入内容" prefix-icon="el-icon-search">
                </el-input>
            </div>
        </div>
        <ul class="back-fff ul">
            <li class="li flex-between" @click="listItem">
                <div>
                    <el-radio v-model="radio" label="1"
                        >COS内容审核全新上线，10万次体验额度免费送！</el-radio
                    >
                </div>
                <div class="time">2021-04-21 12:17:38</div>
            </li>
            <li class="li flex-between">
                <div>
                    <el-radio v-model="radio" label="1"
                        >COS内容审核全新上线，10万次体验额度免费送！</el-radio
                    >
                </div>
                <div class="time">2021-04-21 12:17:38</div>
            </li>
        </ul>
        <div class="back-fff pages flex-end">
            <el-pagination
                :page-size="10"
                layout="total, sizes , prev, pager, next , jumper"
                :total="100"
            >
            </el-pagination>
        </div>
        <el-dialog :visible.sync="dialogVisible" width="50%">
            <div class="dialog">
                <div class="dialog-content">
                    <div class="h4">
                        COS内容审核全新上线，10万次体验额度免费送！
                    </div>
                    <p class="text">
                        If you are looking for a school where bright, energetic
                        and idealistic students come literally from all corners
                        of the world to learn to work together for a better
                        future, then UWC is the school for you. A UWC education
                        is often described as a transformative experience where
                        students understand and celebrate all cultures including
                        their own, embrace one another’s differences, and learn
                        how they can live up to their ideals and effect positive
                        change in their communities.

                        <br /><br /><br />世界上有这样一种学校，这里的学生既聪明又充满活力，并富有远大的理想和抱负，他们来自世界各地，为创造更美好的未来而团结合作。如果你寻找的正是这样的学校，那么UWC是你最佳的选择。UWC教育通常被描述为一种转型性的教育体验。通过在UWC的学习和生活，学生将学会理解和欣赏包括自身文化在内的所有文化，并且能够拥抱彼此间的差异，同时学会如何实现自己的理想，如何为自己的社区做出积极的贡献。
                    </p>
                    <div class="time">接收时间：2021-04-21 12:17:38</div>
                </div>
                <div class="flex-between muens">
                    <div class="deteles">删除</div>
                    <div>
                        <el-button class="btns" size="mini">上一封</el-button>
                        <el-button class="btns" size="mini">下一封</el-button>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
	data() {
		return {
			form: {},
			radio: false,
			value: "",
			dialogVisible: false,
		};
	},
	methods: {
		listItem() {
			this.dialogVisible = true;
		},
	},
};
</script>
<style scoped lang="scss">
.ul {
    margin-top: 19px;
}
.li {
    padding: 20px;
    border-bottom: 1px solid #eee;
    .time {
        color: #666;
    }
}
.pages {
    margin-top: 10px;
    padding: 15px 30px;
}
::v-deep .el-input__inner {
    height: 30px;
    line-height: 30px;
}
::v-deep .el-input__icon {
    line-height: 32px;
}
::v-deep .el-select {
    margin-left: 10px;
}
.dialog {
    padding: 0 10px;
    .h4 {
        font-size: 18px;
        text-align: center;
    }
    .text {
        font-size: 16px;
        line-height: 30px;
    }
    .time {
        color: #666666;
        margin-top: 51px;
    }
    .muens {
        border-top: 1px solid #eee;
        margin-top: 10px;
        padding-top: 15px;
    }
    .dialog-content {
        max-height: 50vh;
        overflow: auto;
    }
    .deteles {
        color: #e62e2e;
    }
    .btns {
        border: solid 1px #2d9ef3;
        color: #2d9ef3;
    }
}
</style>